<template>
  <div>
    <div style="margin-top: 10px">
      <el-button type="primary" icon="el-icon-plus" @click="showAddEmpView">
        添加用户
      </el-button>
      <el-table
          :data="empsec"
          border>
        <el-table-column
            prop="employee.name"
            fixed
            align="left"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="employee.workID"
            fixed
            align="left"
            label="工号">
        </el-table-column>
        <el-table-column
            prop="employeeec.ecdate"
            fixed
            align="left"
            label="奖惩时间">
        </el-table-column>
        <el-table-column
            prop="employeeec.ecreason"
            fixed
            align="left"
            label="奖惩原因">
        </el-table-column>
        <el-table-column
            prop="employeeec.ecpoint"
            fixed
            align="left"
            label="奖惩点数">
        </el-table-column>
        <el-table-column
            prop="employeeec.ectype"
            fixed
            align="left"
            label="类型">
          <template slot-scope="scope">
            {{judge(scope.row.employeeec.ectype)}}
          </template>
        </el-table-column>
        <el-table-column
            prop="employeeec.remark"
            fixed
            align="left"
            label="备注">
        </el-table-column>
        <el-table-column
            fixed="right"
            width="200"
            label="操作">
          <template slot-scope="scope">
            <el-button @click="deleteEmpEc(scope.row)" style="padding: 3px" size="mini" type="danger">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;justify-content: flex-end">
        <el-pagination
            background
            @current-change="currentChange"
            @size-change="sizeChange"
            layout="sizes, prev, pager, next, jumper, ->, total, slot"
            :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="80%">
      <div>
        <el-form :model="empec" ref="empecForm" :rules="rules">
          <el-row>
            <el-col :span="6">
              <el-form-item label="工号:" prop="eid">
                <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit" v-model="empec.eid"
                          placeholder="请输入员工工号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="奖惩原因:" prop="ecreason">
                <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit" v-model="empec.ecreason"
                          placeholder="请输奖惩原因"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
            <el-form-item label="奖惩点数:" prop="ecpoint">
              <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit" v-model="empec.ecpoint"
                        placeholder="请输奖惩原因"></el-input>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
            <el-form-item label="奖惩类型:" prop="ectype">
              <el-radio-group v-model="type">
                <el-radio label="奖">奖</el-radio>
                <el-radio label="惩">惩</el-radio>
              </el-radio-group>
            </el-form-item>
            </el-col>
            <el-col :span="6">
            <el-form-item label="备注:" prop="remark">
              <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit" v-model="empec.remark"
                        placeholder="请输奖惩原因"></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="奖惩日期:" prop="endContract">
                <el-date-picker
                    v-model="empec.ecdate"
                    size="mini"
                    type="date"
                    value-format="yyyy-MM-dd"
                    style="width: 150px;"
                    placeholder="奖惩日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAddEmpec">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "PerEc",
  data() {
    return {
      typeOptions: [
        {
          type: 0,
          item: '奖'
        } ,
        {
          type: 1,
          item: '惩'
        }
      ],
      type: '奖',
      dialogVisible: false,
      empsec: [],
      title: '真好',
      empec: {},
      total: 0,
      page: 1,
      size: 10,
      rules: {
        eid: [{required: true, message: '请输入员工编号', trigger: 'blur'}],
        ecreason: [{required: true, message: '请输入原因', trigger: 'blur'}],
        ecpoint: [{required: true, message: '请输入点数', trigger: 'blur'}],
        remark: [{required: true, message: '请输入注意点', trigger: 'blur'}],
      }
    }
  },
  methods: {
    initPerEcList() {
      this.getRequest("/per/perEmp/getperEmpec").then(res => {
        if (res) {
          this.empsec = res.data;
        }
      })
    },
    deleteEmpEc(data) {
      this.$confirm('此操作将永久删除【' + data.employee.name + '】, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest("/per/perEmp/" + data.employeeec.id).then(resp => {
          if (resp) {
            this.initEmps();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    showAddEmpView() {
      this.emptyEmp();
      this.title = '添加员工';
      this.dialogVisible = true;
    },
    emptyEmp() {
      this.empec = {}
    },
    doAddEmpec() {
      this.$refs['empecForm'].validate(valid => {
        if(valid){
          if(this.type == '奖'){
            this.empec.ectype = 0;
          }else {
            this.empec.ectype = 1;
          }
          this.postRequest("/per/perEmp/",this.empec).then(resp => {
            if (resp) {
              this.dialogVisible = false;
              this.initEmps();
            }
          })
        }
      })
    },
    sizeChange(currentSize) {
      this.size = currentSize;
      this.initEmps();
    },
    currentChange(currentPage) {
      this.page = currentPage;
      this.initEmps();
    },
    initEmps() {
      this.loading = true;
      let url = '/per/perEmp/getperEmpec?page=' + this.page + '&size=' + this.size;
      this.getRequest(url).then(resp => {
        this.loading = false;
        if (resp) {
          this.empsec = resp.data;
          this.total = resp.total;
        }
      });
    },
    judge(type){
      let label = '';
      this.typeOptions.forEach((item) => {
        if(item.type == type ){
          label = item.item;
        }
      })
      return label;
    }
  },
  created() {
    this.initPerEcList();
  }
}
</script>

<style scoped>

</style>
